<template>
  <page-header-wrapper content="添加一条设备记录,用于设备连接MQTT服务器">
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item
          label="设备名"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input
            v-decorator="[
              'name',
              { rules: [{ required: true, message: '请输入设备名' }] },
            ]"
            name="name"
            placeholder="给设备起个名字"
          />
        </a-form-item>

        <a-form-item
          label="设备类型"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-select
            v-decorator="[
              'typeId',
              {
                rules: [{ required: true, message: '请选择设备类型' }],
              },
            ]"
            placeholder="选择一个设备类型"
          >
            <a-select-option
              :value="item.ID"
              v-for="(item, index) in types"
              :key="index"
            >
              {{ item.Name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="设备描述"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-textarea
            rows="4"
            placeholder="请输入设备描述"
            v-decorator="[
              'describe',
              { rules: [{ required: true, message: '请输入设备描述' }] },
            ]"
          />
        </a-form-item>

        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button htmlType="submit" type="primary">提交</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-modal
      v-model="success"
      title="新增设备成功"
      centered
      @ok="() => toIndex()"
    >
      <a-result status="success" title="新增设备成功">
        <template #extra>
          <div class="device-info">
            <div>
              <span>设备名：</span>
              <span> {{deviceName}}</span>
            </div>
            <div>
              <span>设备key：</span>
              <span>{{deviceKey}}</span>
            </div>
          </div>
        </template>
      </a-result>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { getDeviceTypes, addDevices } from "@/api/device";
export default {
  name: "BaseForm",
  data() {
    return {
      success: false,
      form: this.$form.createForm(this),
      types: [],
      deviceName:"",
      deviceKey:""
    };
  },
  created() {
    this.getDeviceTypes();
  },
  methods: {
    getDeviceTypes() {
      getDeviceTypes().then((res) => {
        this.types = res.data;
      });
    },
    toIndex(){
      this.$router.push({name:"dashboard"})
    },
    // handler

    handleSubmit(e) {
      e.preventDefault();

      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          addDevices(values).then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.success = true;
              this.deviceName = values.name
              this.deviceKey = res.data
            } else {
              this.$notification.error({
                message: res.message,
              });
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.device-info {

  display: flex;
  flex-direction: column;
  justify-self: start;
  align-items: center;
}
.device-info>div{
  width: 300px;
    display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 30px;
}
</style>